{% extends "kjs/rainbow/layouts/main.html" %}

{% block common_css %}
    {{ block.super }}
    <style type="text/css">
        div.rainbowPhotoFrameShowcaseWidget {
            margin:0 auto;
            background:#0688fa;
            padding:1%;
        }

        div.rainbowPhotoFrameWidget {
            margin:10px 5px;
            padding:10px;
            background-color:white;
            display:none;
        }
    </style>
{% endblock %}

{% block rainbow_body %}
    <div class="rainbowPhotoFrameShowcaseDataWidget">
        <input type="hidden" name="rainbow_photo_frame_showcase_index" value="{{ index }}"/>
        <input type="hidden" name="rainbow_photo_frame_showcase_scope" value="{{ scope }}"/>
        <input type="hidden" name="rainbow_photo_frame_showcase_size" value="{{ photo_list.count }}"/>
        <input type="hidden" name="rainbow_photo_frame_showcase_count" value="{{ count }}"/>
        <div class="loadingDataWidget">
            {% for photo_instance in photo_list %}
                <div class="rainbowPhotoFrameWidget loadingWidget">
                    <a href="/rainbow/photoframe/{{ photo_instance.id }}/show?format=sample"></a>
                </div>
            {% endfor %}
        </div>
    </div>
    <div class="rainbowPhotoFrameShowcaseWidget"></div>
{% endblock %}

{% block common_script %}
    {{ block.super }}
    <script type="text/javascript">
        $(document).ready(function(){
            $(this).kjsuiLoad("autoSizeWidget");
            //初始化
            var showCaseWidget = $("div.rainbowPhotoFrameShowcaseWidget");
            showCaseWidget.kjsAutoSizeWidget({
                width:$(window).width() * 0.9,
                lineWidth:330,
                end:function(ui){
                    ui.css({
                        "min-height":$(window).height()
                    });
                }
            });
            //加载数据
            var loadingDataWidget = $("div.rainbowPhotoFrameShowcaseDataWidget").find("div.loadingDataWidget");
            var loadingWidgets =  loadingDataWidget.find("div.loadingWidget");
            if (loadingWidgets.size() > 0) {
                var loadingInterval = window.setInterval(function(){
                    var loadings = loadingDataWidget.find("div.loadingWidget");
                    if (loadings.size() == 0) {
                        window.clearInterval(loadingInterval);
                        var loadedWidgets = loadingDataWidget.find("div.loadedWidget");
                        for (var i=0; i<loadedWidgets.size(); i++) {
                            var loadedWidget = $(loadedWidgets.get(i));
                            loadedWidget.show();
                            showCaseWidget.kjsAutoSizeWidget("addCell", loadedWidget);
                            loadedWidget.animate({opacity:1}, 50 * i);
                        }

                    }
                }, 100);
            }
            for (var i=0; i<loadingWidgets.size(); i++) {
                var loadingWidget = $(loadingWidgets.get(i));
                loadingWidget.kjsLoadingWidget({
                    success:function(data, ui){
                        ui.css("opacity", 0);
                        ui.removeClass("loadingWidget");
                        ui.addClass("loadedWidget");
                    }
                });
            }
        });
    </script>
{% endblock %}
